<template>
  <div v-for="(spec, index) in props.data" :key="index" class="spec-box">
    <!-- <div>{{ spec.label }}</div> -->
    <el-divider content-position="left">{{ spec.label }}</el-divider>

    <div style="padding-top: 10px">
      <el-checkbox-group v-model="checkList[index]" :max="1">
        <el-checkbox
          size="large"
          v-for="(tag, index) in spec.tags"
          :key="tag + '-' + index"
          :label="tag"
        />
      </el-checkbox-group>
    </div>
  </div>
  <div class="footer">
    <el-button type="primary" @click="onSubmit">确定</el-button>
    <el-button @click="onCancel">取消</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const emits = defineEmits(["specConfirm"]);
const props = defineProps(["data"]);
const checkList = ref([]);

const onCancel = () => {
  emits("specConfirm", null);
};

const onSubmit = () => {
  console.log(checkList.value);
  const specList = checkList.value;
  emits(
    "specConfirm",
    specList.map(spec => spec[0])
  );
};
</script>

<style scoped lang="css">
.spec-box {
  margin-bottom: 25px;
}

.footer {
  margin-top: 30px;
}
</style>
